<template>
<div class="order">
<div class="detail_message" ref="ref_detail_message">
 <el-descriptions title="" direction="vertical" :column="5" border :data="detail_mes">
   
    <template slot="extra">
             <span class="span">详情列表</span>
             <div class="lose_a" ref="ref_lose"></div>
          <i class="el-icon-edit" ref="ref_edit" @click="handleCloseEdit()"></i>
         <!--  -->
          <div class="selections" ref="ref_selections">
            <i class="el-icon-upload el-icon--right"></i>
            <i class="el-icon-share"></i>
            <i class="el-icon-plus" @click="addNew_desc()"></i>
            <i class="el-icon-delete" @click="handleDeleted1()"></i>
            <i class="el-icon-check" @click="handleEdit()"></i>
            <i class="el-icon-close" @click="close_selections()"></i>
        </div>
      </template>
       <!-- 使用template进行包裹遍历（注意：key要放在真实dom上）slot-scope="scope"  ref="ref_normal"-->
         <template v-for="(item, index) in detail_mes">
 
      <el-descriptions-item label="序号"  title="不可修改" :key="index" class="input_min"> {{index+1}}</el-descriptions-item>
      <el-descriptions-item label="日期"  :key="index"><input type="text"  class="input_medium" v-model.lazy="item.date"> </el-descriptions-item>
      <el-descriptions-item label="订单编号"  :key="index"><input type="text"  class="input_medium" title="不可修改" v-model.lazy="item.order_code"> </el-descriptions-item>
      <el-descriptions-item label="指导医生"  :key="index"><input type="text" class="input_medium" v-model.lazy="item.doctor"></el-descriptions-item>
      <el-descriptions-item label="归属药房"  :key="index"><input type="text" class="input_medium" v-model.lazy="item.shop_names"></el-descriptions-item>
      <el-descriptions-item label="姓名" :key="index"><input type="text" class="input_medium" title="不可修改" v-model.lazy="item.username"></el-descriptions-item>
      <el-descriptions-item label="性别" :key="index"><input type="text" class="input_min" v-model.lazy="item.sex"></el-descriptions-item>
      <el-descriptions-item label="年龄" :key="index"><input type="text" class="input_min" v-model.lazy="item.age"></el-descriptions-item>
      <el-descriptions-item label="身份证信息" :span="1" :key="index"><input type="text" class="input_medium" v-model.lazy="item.IDcard"></el-descriptions-item>
      <el-descriptions-item label="有无过敏/病史" :span="1" :key="index"><input type="text" class="input_medium" v-model.lazy="item.ill_history"></el-descriptions-item>
      <el-descriptions-item label="诊断结果" :span="1" :key="index"><input type="text" class="input_medium" v-model.lazy="item.result"></el-descriptions-item>
      <el-descriptions-item label="需求药方" :span="2" :key="index" class="input_max"><input type="text" class="input_max" v-model.lazy="item.need_detail"></el-descriptions-item>
       <el-descriptions-item label="代煎" :span="1" :key="index"><input type="text" class="input_min" v-model.lazy="item.help"></el-descriptions-item>
      <el-descriptions-item label="总价" :key="index"><input type="text" class="input_min" v-model.lazy="item.total_price"></el-descriptions-item>
      <el-descriptions-item label="订单状态" :key="index">
        <!--  <input type="text" class="input_medium" v-model.lazy="item.status"> -->

        <!-- 下拉菜单 -->
        <!-- 该组件通过 el-dropdown 标签表示，通过 @command 事件监听器来处理菜单项被点击时触发的事件。
        通过handleCommand方法接收点击菜单项的命令（即 command 属性），并将其更新到 item.status 的数据属性中。 -->
      <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <input type="text" class="input_min" v-model.lazy="item.status">
            <i class="el-icon-arrow-up el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="代煎中">代煎中</el-dropdown-item>
            <el-dropdown-item command="配送中">配送中</el-dropdown-item>
            <el-dropdown-item command="已完成">已完成</el-dropdown-item>
            <el-dropdown-item command="其它状态" divided>其它状态</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
       
      </el-descriptions-item>
      <el-descriptions-item label="联系方式及地址" :key="index"><input type="text" class="input_max" v-model.lazy="item.address"></el-descriptions-item>

        </template>
        <!-- 新建页面 -->
           
        <!-- 结束页面 -->
</el-descriptions>
</div>
<!--  -->
<div class="lose2" ref="ref_lose2"></div>
<el-table
  :data="tableData"
  border
  style="width: 100%"
  fit
  type="index"
  class="table"
  max-height="700"
  >
<el-table-column
  fixed
  label="序号"
  width="70"
  >
  <template scope="scope">
    {{scope.$index+1}}
  </template>
</el-table-column>
<el-table-column
  fixed
  prop="date"
  label="日期"
  width="150"
  sortable 
  >
</el-table-column>
 <el-table-column
  prop="order_code"
  label="订单编号"
  width="150">
</el-table-column>
  <el-table-column
  prop="doctor"
  label="开方医生"
  width="100">
</el-table-column>
  <el-table-column
  prop="shop_names"
  label="药房归属"
  width="150">
</el-table-column>
<el-table-column
  prop="username"
  label="患者姓名"
  width="100">
</el-table-column>
<el-table-column
  prop="sex"
  label="性别"
  width="50">
</el-table-column>
  <el-table-column
  prop="IDcard"
  label="身份证信息"
  width="200">
</el-table-column>
<el-table-column
  prop="need_detail"
  label="需求药方"
  width="250">
</el-table-column>

  <el-table-column
  prop="total_price"
  label="总价"
  width="120">
</el-table-column>
<el-table-column
  prop="help"
  label="是否代煎"
  width="120">
</el-table-column>
  <el-table-column
  prop="address"
  label="地址"
  width="300">
</el-table-column>
  <el-table-column
  prop="status"
  label="订单状态"
  width="120">
</el-table-column>
<el-table-column
  fixed="right"
  label="操作"
  width="150"
  >
  <template slot-scope="scope">
    <el-button @click="handleClick(scope.row,scope.$index)" type="text" size="small">查看</el-button>
     <el-button type="text" size="small" @click="handleDeleted(scope.row,scope.$index)" class="deleted">删除</el-button>
  </template>
</el-table-column>
</el-table>

  
  <div class="tableData_length" v-if="istableDataLength">当前数据为{{this.tableData.length}}条</div>

  </div>

</template>

<script>

export default {
  data(){
    return{
      istableDataLength:true,
      istrue:false,
      isshowUserMess:false,
      tableData: [],
      detail_mes:{},
      update_index:'',
      isadd:true,
      addNumber:false,
      index:''

      // newAdd_detail_mes:{date,},
    }
  },
  methods:{
        //打开详情及编辑器
         handleClick(row,index) {
            this.detail_mes = []
            this.$refs.ref_detail_message.style.opacity = '100%'
            this.$refs.ref_detail_message.style.height = '470px'
            this.$refs.ref_edit.style.display = 'block'
            this.detail_mes.push(row)
            console.log('拿到index',index);
            this.update_index = index
            this.index = index
            
          },
          //保存并打开编辑器
          handleEdit(){
            //打开编辑器
            this.$refs.ref_edit.style.display = 'block'
             //关闭选择框
            this.$refs.ref_selections.style.opacity = '0%'
            this.$refs.ref_selections.style.height = '0px'
            this.$refs.ref_lose.style.height = '10px'
            this.$refs.ref_lose2.style.height  = '0px'
            //更新
            console.log('需要更新的数据',this.detail_mes);
            if(this.detail_mes[0].username != '' && this.addNumber == false){
                //弹窗成功
                this.$message({
                  showClose: true,
                  message: '您修改了一个记录！',
                  type: 'success'
                });
               let a = this.update_index
                this.$axios.post('api/update/message_lists?date='+this.detail_mes[0].date+'&doctor='+this.detail_mes[0].doctor+'&username='+this.detail_mes[0].username
                +'&sex='+this.detail_mes[0].sex+'&age='+this.detail_mes[0].age+'&IDcard='+this.detail_mes[0].IDcard+'&ill_history='+this.detail_mes[0].ill_history+'&result='+this.detail_mes[0].result+'&address='
                +this.detail_mes[0].address+'&need_detail='+this.detail_mes[0].need_detail+'&source='+this.detail_mes[0].source+'&total_price='+this.detail_mes[0].total_price+'&help='+this.detail_mes[0].help
                +'&status='+this.detail_mes[0].status).then(res=>{
                  console.log('已更新的数据列表',res);
                })
            }
           
            //新增
            if(this.detail_mes[0].username != '' && this.addNumber == true){
              console.log('新增',this.detail_mes);
              this.$axios.post('api/message_lists/insert?date='+this.detail_mes[0].date+'&doctor='+this.detail_mes[0].doctor+'&source='+this.detail_mes[0].source+'&username='+this.detail_mes[0].username
              +'&sex='+this.detail_mes[0].sex+'&age='+this.detail_mes[0].age+'&IDcard='+this.detail_mes[0].IDcard+'&ill_history='+this.detail_mes[0].ill_history+'&result='+this.detail_mes[0].result+'&address='
              +this.detail_mes[0].address+'&need_detail='+this.detail_mes[0].need_detail+'&total_price='+this.detail_mes[0].total_price+'&help='+this.detail_mes[0].help
              +'&status='+this.detail_mes[0].status).then(res=>{
                 if(res.data.code ==200){
                     console.log(res);
                      //弹窗成功
                    this.$message({
                      showClose: true,
                      message: '您新增了一条记录',
                      type: 'success'
                    });
                 }else{
                  //弹窗警告
                  this.$message({
                    showClose: true,
                    message: '订单信息未完善！',
                    type: 'error'
                  });
                }
              })
             
            }
             //关掉新增选项
            this.addNumber = false
            //刷新
              this.refresh()
          },
          //关闭
          close_selections(){
            this.$refs.ref_selections.style.opacity = '0%'
            this.$refs.ref_lose.style.height = '0px'
             this.$refs.ref_selections.style.height = '0px'
             this.$refs.ref_detail_message.style.opacity = '0%'
            this.$refs.ref_detail_message.style.height = '0px'
            this.$refs.ref_lose2.style.height = '0px'
            
          },
          //打开选择框
          handleCloseEdit(){
            this.$refs.ref_edit.style.display = 'none'
            this.$refs.ref_selections.style.opacity = '100%'
            this.$refs.ref_selections.style.height = '0px'
            this.$refs.ref_lose.style.height = '60px'
            this.$refs.ref_lose2.style.height  = '35px'
          },
          //删除1
          handleDeleted1(){
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.post('api/message_lists/deleted?username='+this.detail_mes[0].username)
              //刷新
              this.$axios.get("/api/message_lists").then(res=>{
                this.tableData = res.data.params.data
                //为空数组添加数据
              this.detail_mes = [{date:'',order_code:'',doctor:'',source:'',username:'',sex:'',
              age:'',IDcard:'',ill_history:'',result:'',need_detail:'',help:'',total_price:'',status:'',address:''}]
              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
               //刷新
              this.refresh()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          //删除
          handleDeleted(row,index){
             this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.post('api/message_lists/deleted?username='+row.username)
              //刷新
              this.$axios.get("/api/message_lists").then(res=>{
                this.tableData = res.data.params.data
                  //为空数组添加数据
              this.detail_mes = [{date:'',order_code:'',doctor:'',source:'',username:'',sex:'',
              age:'',IDcard:'',ill_history:'',result:'',need_detail:'',help:'',total_price:'',status:'',address:''}]
              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
               //刷新
              this.refresh()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          //添加数组
         addNew_desc(){
           console.log('添加');
           //打开添加开关
           this.addNumber = true
          this.detail_mes = [{date:'',order_code:'',doctor:'',source:'',username:'',sex:'',
           age:'',IDcard:'',ill_history:'',result:'',need_detail:'',help:'',total_price:'',status:'',address:''}]
        },
        //刷新
        refresh(){
            //刷新
              let timer =  setInterval(res=>{
                      this.$router.replace({ path:'/empty',query:{a:'order'}})
                      console.log('定时器');
                      clearInterval(timer)
                },800)
        },
        // 订单选择状态
         handleCommand(command) {
           console.log(command,'index:',this.index);
        this.tableData[this.index].status = command
      }
          
      },
  mounted(){
    //发送数据请求
      this.$axios.get("/api/message_lists").then(res=>{
       this.tableData = res.data.params.data
       console.log(this.tableData);
    })
     if(this.tableData.length==0){
      this.istableDataLength = false
    }
  }
}
</script>

<style>
.deleted{
  color: crimson;
}
.el-icon-edit{
  position: absolute;
  top: 0.5%;
  width: 20px;
  height: 10px;
  right: 2%;
  color: white;
  background-color: dodgerblue;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
}
.el-descriptions__body {
  margin-left: 0px;
  width: 80%;
}

.el-descriptions{
  width: 100%;
}
.order{
  position: absolute;
  top: 8.6%;
  left: 162px;
  width: 86.8%;
  height: auto;
  display: flex;
  flex-flow: column;
  user-select: none;
  transition: all 1s;
  margin-left: 20px;

}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  input.input_max{
    width: 600px;
    font-size: 15px;
    user-select: none;
  }
  /* .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .demonstration {
      display: block;
      color: #8492a6;
      font-size: 14px;
      margin-bottom: 20px;
    } */

    /* .selections{
      position: relative;
      text-align: left;
      left: 1%;
      width: 80%;
      height: 0px;
      opacity: 0%;
      transition: all 1s;
    }
    
    .selections>i{
      margin: 3px;
      width: 50px;
      height: 33px;
      border-radius: 5px;
      text-align: center;
      line-height: 33px;
      font-size: 20px;
      color: #f7f7f7;
      background-color: rgb(99, 168, 237);
    }
      .selections>i:nth-child(5){
        position: absolute;
      left: 89%;
      width: 50px;
      height: 33px;
      border-radius: 5px;
      text-align: center;
      line-height: 33px;
      font-size: 20px;
      color: #f7f7f7;
      background-color: dodgerblue;
    }

    .selections>i:nth-child(6){
      position: absolute;
      left: 93.5%;
      width: 50px;
      height: 33px;
      border-radius: 5px;
      text-align: center;
      line-height: 33px;
      font-size: 20px;
      color: #f7f7f7;
      background-color: dodgerblue;
    }
    .selections>i:hover{
      background-color: dodgerblue;
    }
    .selections>i:active{
      background-color: rgba(30, 143, 255, 0.626);
    }
    .span{
      position: absolute;
      display: block;
      left: 0%;
      margin-bottom: 10px;
      margin-left: 20px;
      font-size: 20px;
      font-family: '宋体';
      color: gray;
    }
    .lose_a{

      height: 15px;
      transition: all 1s;
      border: 1px solid ;
    }
  .detail_message{
    opacity: 0%;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 0px;
    transition: all 1s;
    box-shadow: 0px 1px 4px gray;
    position: relative;
  }

  .tableData_length{
    text-align: center;
    color: gray;
  }
  .input_medium{
    width:140px;
    margin-right: 20px;
    font-size: 15px;
    width: auto;
    border: 2px solid transparent;
    user-select: none;
  }
  .input_min{
    width: 50px;
    font-size: 15px;
    width: auto;
    border: 2px solid transparent;
    user-select: none;
  }
  

  .lose2{
    height: 0px;
  } */


/* table{

 
}
th{
  border: 2px solid black;
}
tr{
  border: 1px solid ;
}
td{
   border: 1px solid gray;
} */





</style>